<template>
  <div class="venuePage bgfff">
    <div class="venue_list">
      <div class="venue_item" v-for="(item, index) in venueList" :key="index">
        <div class="vanue_title">
          <div class="lineTitle">
            <div class="line"></div>
            <span>{{ item.name }}</span>
          </div>
          <div class="btns">
            <el-button type="primary" size="mini" @click="onBtns(1, item)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="onBtns(2, item)"
              >删除</el-button
            >
            <el-button
              type="danger"
              plain
              size="mini"
              @click="onBtns(3, item)"
              >{{ item.status == 1 ? "下架" : "上架" }}</el-button
            >
          </div>
        </div>
        <div class="vanue_main">
          <img :src="item.facade_img" alt="" />
          <div class="info">
            <div>
              <span class="item_lable">场馆类型：</span>{{ item.type_text }}
            </div>
            <div>
              <span class="item_lable">是否需要审核：</span
              >{{ item.is_review_text }}
            </div>
            <div>
              <span class="item_lable">所需积分：</span>{{ item.score }} 分
            </div>
            <div>
              <span class="item_lable">场馆面积：</span>{{ item.area }} 平方
            </div>
            <div>
              <span class="item_lable">最高容纳人数：</span
              >{{ item.people_num }} 人
            </div>
            <div>
              <span class="item_lable">开放时间：</span>{{ item.open_time }}
            </div>
            <div>
              <span class="item_lable">联系人：</span>{{ item.contacter }}
            </div>
            <div>
              <span class="item_lable">联系电话：</span>{{ item.contact_phone }}
            </div>
            <div class="ellipsis" :title="item.address">
              <span class="item_lable">场馆地址：</span>{{ item.address }}
            </div>
            <div class="ellipsis" :title="item.warning">
              <span class="item_lable">温馨提示：</span>{{ item.warning }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVenueList, chageStatusVenue, delVenue } from "@/api/venue";
export default {
  name: "",
  props: ["form"],
  data() {
    return {
      venueList: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      // console.log(this.form);
      getVenueList({
        name: this.form.venue_name,
        type: this.form.venue_type,
        status: this.form.status,
        limit: 99,
      }).then((res) => {
        this.venueList = res.data.list;
      });
    },
    onBtns(type, val) {
      if (type == 1) {
        //编辑
        this.$emit("openaddVenue", val);
      } else if (type == 2) {
        //删除
        delVenue({
          id: val.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else {
        let status = "";
        if (val.status == 1) {
          //下架
          status = 2;
        } else {
          //上架
          status = 1;
        }
        chageStatusVenue({
          id: val.id,
          status,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      }
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.venuePage {
  padding: 24px;
  //   height: calc(100vh - 170px);
  .venue_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .venue_item {
      padding: 24px 24px 0;
      width: 700px;
      height: 448px;
      border: 1px solid #e5e5e5;
      margin-bottom: 20px;
      .vanue_title {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .vanue_main {
        display: flex;
        img {
          flex-shrink: 0;
          margin-right: 20px;
          width: 238px;
          height: 328px;
        }
        .info {
          height: 328px;
          > div {
            width: 392px;
            display: flex;
            margin-bottom: 12px;
          }
          .item_lable {
            font-size: 14px;
            width: 115px;
            flex-shrink: 0;
            display: inline-block;
            text-align: right;
            color: #606266;
          }
        }
      }
    }
  }
}
</style>
